import React, {Component} from 'react';
import {Form, Icon, Input, Modal, Upload, message } from 'antd';

const FormItem = Form.Item;
const Dragger = Upload.Dragger;
class ItemForm extends Component{

    constructor(props){
        super(props);
    }

    componentDidMount(){
    }

    // beforeUpload=(file)=>{
    //     const isJPG = file.type === 'image/jpeg';
    //     if (!isJPG) {
    //       message.error('You can only upload JPG file!');
    //     }
    //     const isLt2M = file.size / 1024 / 1024 < 2;
    //     if (!isLt2M) {
    //       message.error('Image must smaller than 2MB!');
    //     }
    //     return isJPG && isLt2M;
    // }

    handleChange(info) {
        const status = info.file.status;
        if (status !== 'uploading') {
            if(info.fileList[0].response.code == 200){
                this.props.form.setFieldsValue({
                    itemPic: info.fileList[0].response.message
                });
            }
        }
        if (status === 'done') {
            message.success(`${info.file.name} file uploaded successfully.`);
        } else if (status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
        }
    }
    
    render(){
        const { visible, onCancel, onCreate, form, okText, title} = this.props;
        const { getFieldDecorator } = form;
        const FormItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 16 },
        };
        const props = {
            name: 'image',
            listType: 'picture',
            multiple: false,
            action: '/manage/image/upload',
            // beforeUpload: this.beforeUpload,
            onChange: this.handleChange.bind(this)
        };
        return (
            <Modal
                visible={visible}
                title={title}
                okText={okText}
                onCancel={onCancel}
                onOk={onCreate}
            >
                <Form layout="horizontal">
                    {getFieldDecorator('id')(
                        <Input type='hidden'/>
                    )}
                    <FormItem label="类目名称" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('itemName', {
                            rules: [{ required: true, message: '请输入链接地址！' }],
                        })(
                            <Input />
                        )}
                    </FormItem>
                    <FormItem label="图片地址"  hasFeedback>
                        {getFieldDecorator('itemPic', {
                            rules: [{ required: true, message: '请上传图片！' }]
                        })(
                            <Input />
                        )}
                    </FormItem>
                    <Dragger {...props}>
                        <p className="ant-upload-drag-icon">
                            <Icon type="inbox" />
                        </p>
                        <p className="ant-upload-text">点击或拖拽上传</p>
                    </Dragger>
                    <FormItem label="链接地址" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('linkUrl', {
                            rules: [{ required: true, message: '请输入链接地址！' }],
                        })(
                            <Input />
                        )}
                    </FormItem>
                </Form>
            </Modal>
        );
    }
}

const ItemCreateForm = Form.create()(ItemForm);
export default ItemCreateForm;